<template>
 <div>
  <el-table :data="tableData"
    :size="tableSize"
    :height="tableHeight"
    @expand-change="expandChange"
    highlight-current-row
    :row-class-name="tableRowClassName"
    >
    <el-table-column
      type="index"
      width="40">
    </el-table-column>
    <el-table-column width="80px" label="测试状态" >
      <template slot-scope="scope">
        <el-tag :type="statusType(scope.row.status)" @click="showView(scope.row)">{{ statusTypeName(scope.row.status) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column width="40">
      <template slot-scope="scope">
        <el-button type="text" size="mini" @click="showPOP(scope.row)">
          {{scope.row.flag===true?'&lt;&lt;':'&gt;&gt;'}}
        </el-button>
        <el-popover
          :id="scope.row.testCode + scope.row.codeRepositoryName"
          :key="scope.row.testCode + scope.row.codeRepositoryName"
          :ref="scope.row.testCode + scope.row.codeRepositoryName"
          placement="right"
          trigger="click"
          :class="myPop"
          :popper-class="popClass"
          :visible-arrow="false"
        >
          <process :key="scope.row.tId" :ref='scope.row.testCode + scope.row.tId' :row="scope.row" />
        </el-popover>
      </template>
    </el-table-column>
<!--    <el-table-column prop="testCode"        label="编号"         width="110px"></el-table-column>-->
    <el-table-column width="70" label="类型">
      <template slot-scope="scope">
        <el-tag :type="testTypeTag(scope.row.type)" effect="plain">{{ testType(scope.row.type) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="findTime"        label="发现时间"      width="100px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="codeRepositoryName" label="测试环境"   width="80px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="projectName"     label="项目"        width="90px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="lv1ModuleName"   label="模块"      width="90px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="lv2ModuleName"   label="子模块"    width="120px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="devPersonName"   label="开发负责人" width="90px"></el-table-column>
    <el-table-column prop="testPersonName"  label="测试负责人" width="90px"></el-table-column>
<!--    <el-table-column label="问题类型" width="80px">-->
<!--      <template slot-scope="scope">-->
<!--        {{ questionTypeName(scope.row.questionType) }}-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column prop="describe"        label="问题描述"   width="310px" show-overflow-tooltip></el-table-column>
    <el-table-column prop="preRepair"       label="预计修复时间" width="140px"></el-table-column>
    <el-table-column prop="preOnline"       label="预计上线时间" width="140px"></el-table-column>
<!--    <el-table-column prop="dispatchTime"       label="分配时间" width="140px"></el-table-column>-->
<!--    <el-table-column prop="openTime"       label="打开时间" width="140px" ></el-table-column>-->
<!--    <el-table-column prop="submitTime"       label="代码提交时间" width="140px" ></el-table-column>-->
<!--    <el-table-column prop="closeTime"       label="关闭时间" width="140px" ></el-table-column>-->
    <el-table-column label="操作" width="135" fixed="right">
      <template slot-scope="scope">
        <el-button @click="showView(scope.row)" type="text" size="small" icon="el-icon-view" style="margin-top: -10px">查看</el-button>
        <el-button @click="handleEdit(scope.row)" type="text" size="small" style="margin-top: -10px" v-show="showEdit(scope.row)">编辑</el-button>
        <el-button @click="handleDelete(scope.row)" type="text" size="small" style="margin-top: -10px " v-show="showDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      style="margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next"
      background
      :total="page.totalNum">
    </el-pagination>
  </div>
 </div>
</template>

<script>
import { remove } from '@/api/events'
import Process from './process'
import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'window_height'
      ])
    },
    props: ['role'],
    components: {
      Process
    },
    data() {
      return {
        myPop: 'myPop1',
        popClass: 'popClass1',
        tableSize: 'mini',
        tableHeight: 520,
        height: `${document.body.clientHeight}`,
        loading: false,
        showTran: false,
        page: {
          pageNum: 1,
          pageSize: 10,
          totalNum: 0,
          totalPage: 0
        },
        tableData: []
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.status === 5) {
          return 'warning-row';
        } else if (row.status === 7) {
          return 'danger-row';
        }
        return '';
      },
      showView(row) {
        //待自测
        if (row.status === 8) {
          this.$parent.$refs.search.$refs.pop2.init(row)
          return
        }
        //待测试
        if (row.status === 4 && row.type !== 0 ) {
          this.$parent.$refs.search.$refs.approval.init(row)
          return
        }
        //新增查阅
        if (row.status === 0 || row.status === 1 || row.status === 3) {
          this.$parent.$refs.search.$refs.back2.init(row)
          return
        }
        if (row.type===0 && row.status === 4) {
          this.$parent.$refs.search.$refs.task.init(row)
        }
        this.$parent.$refs.search.$refs.pop.init(row)
        // else {
        //
        // }
      },
      showEdit(row) {
        return (row.type === 2 || row.type === 3) && row.status !== 5
      },
      showDelete(row) {
        return row.type === 2 && row.status !== 5 &&
          (this.role==='tester' || this.role==='manager' || this.role==='analyst' || this.role==='admin')
      },
      showColumn(row) {
        let flag = row.flag
        if (flag==null||flag===0) {
          flag=1
        } else {
          flag=0
        }
        row.flag = flag
      },
      changeStatus(taskId, process, status) {
        for (let i=0; i<this.tableData.length; i++) {
          if (this.tableData[i].taskId===taskId) {
            this.tableData[i].status = status
            this.tableData[i].process = process
          }
        }
      },
      expandChange(row, rowList) {
      },
      testType(type) {
        switch (type) {
          case 0:
            return '任务'
          case 1:
            return '生产'
          case 2:
            return '测试'
          case 3:
            return '回归'
        }
      },
      testTypeTag(type) {
        switch(type) {
          case 0:
            return 'info'
          case 1:
            return 'primary'
          case 2:
            return 'warning'
          case 3:
            return 'warning'
        }
      },
      statusType(type) {
        switch(type) {
          case 0:
            return 'info'
          case 1:
            return 'primary'
          case 2:
            return 'info'
          case 3:
            return 'info'
          case 4:
            return 'warning'
          case 5:
            return 'info'
          case 6:
            return 'warning'
          case 7:
            return 'danger'
        }
      },
      statusTypeName(type) {
        switch(type) {
          case 0:
            return '新建'
          case 1:
            return '已分配'
          case 2:
            return '打开'
          case 3:
            return '已提交'
          case 4:
            return '待测试'
          case 5:
            return '已关闭'
          case 6:
            return '再次打开'
          case 7:
            return '拒绝'
          case 8:
            return '待自测'
        }
      },
      getTableData(data) {
        this.tableData.forEach(e => {
          document.getElementById(e.testCode + e.codeRepositoryName).children[0].style = "display: none"
        })
        this.$refs = {}
        this.tableData = data.content
        this.page.totalNum = data.totalNum
        this.page.totalPage = data.totalPage
        this.tableData.forEach(e => {
          e.flag = false
          e.tab = '&lt;&lt;'
          e.show = true
        })
      },
      handleSizeChange(value) {
        this.page.pageSize = value
        this.$parent.$refs.search.handleClickSearch()
      },
      handleCurrentChange(value) {
        this.page.pageNum = value
        this.$parent.$refs.search.handleClickSearch()
      },
      handleEdit(row) {
        this.$parent.$refs.search.$refs.pop.editShowView(row)
      },
      handleDelete(row) {
        this.$confirm('是否删除此条生产数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove(row.peId).then(_ => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$parent.$refs.search.handleClickSearch()
          })
        })
      },
      rowClass({row, rowIndex}) {
        return { "background-color": "rgba(255, 255, 255)" };
      },
      showPOP(row) {
        // 所有都隐藏
        this.tableData.forEach(e => {
          document.getElementById(e.testCode + e.codeRepositoryName).children[0].style = 'display: none'
        })
        if (row.status === 2 || row.status === 3) {
          return
        }
        let flag = !row.flag
        flag
          ? document.getElementById(row.testCode + row.codeRepositoryName).children[0].style = "width: 410px; margin-left: 30px"
          : document.getElementById(row.testCode + row.codeRepositoryName).children[0].style = "display: none"
        this.tableData.forEach(e => {
          if (e.testCode!==row.testCode) {
            e.flag = false
            document.getElementById(e.testCode + e.codeRepositoryName).children[0].style = "display: none"
          } else {
            e.flag = flag
          }
        })
        this.$refs[row.testCode+row.tId].tranShow()
      }
    },
    created() {
      this.tableHeight = this.window_height - 107
      // this.height > 900 ? this.tableHeight= 830:520
      this.height > 900 ? this.tableSize = 'medium' : 'mini'
      this.height > 900 ? this.myPop = 'myPop1' : 'myPop2'
      this.height > 900 ? this.popClass = 'popClass1' : 'popClass2'
    },
  }
</script>

<style>
.el-table__body tr:hover>td {
  background-color: #ffffff !important;
}
.el-table__body tr.current-row>td {
  background-color: #F5F7FA !important;
}
.el-table .warning-row {
  background: rgb(240, 240, 240);
}
.el-table .danger-row {
  background: rgb(254, 240, 240);
}
</style>

<style>
.myPop1>.el-popover.popClass1 {
  padding-top: 13px !important;
  padding-bottom: 12px !important;
  padding-left: 2px !important;
  border: 0 !important;
  background: #F5F7FA !important;
  -webkit-box-shadow: none !important;
  box-shadow: none;
  float: right;
  margin-top: -40px;
  margin-left: 20px;
}
.myPop2>.el-popover.popClass2 {
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  padding-left: 2px !important;
  border: 0 !important;
  background: #F5F7FA !important;
  -webkit-box-shadow: none !important;
  box-shadow: none;
  float: right;
  margin-top: -40px;
  margin-left: 20px;
}

</style>

